<template>
  <div class="roleManage">
      <div class="ibox-title">
          <h5>角色管理</h5>
          <div class="ibox-tools">
              <a  class="dh"><i class="fa fa-chevron-up"  @click="toggle"></i></a>
              
              <a ><i class="fa fa-times"></i></a>
          </div>
      </div>
      <div class="ibox-centent" v-show="isShow">
          <div class="row">
              <div class="search">
                     <a class="btn" @click="create"><i class="fa fa-plus"></i>创建</a>
                 
              </div>
              <!-- fa fa-refresh -->
              <div class="tt">
                    <el-table :data="tableData" style="width: 100%">
                            <el-table-column type="index" label="序号" width="100">
                              </el-table-column>
                              <el-table-column property="identify" label="标识" width="280">

                              </el-table-column>
                              <el-table-column property="name" label="名称">
                                
                              </el-table-column>
                              <el-table-column property="unit" label="所属单位">
                                <!--<template scope="scope">

                                </template>-->
                              </el-table-column>
                              <el-table-column property="" label="操作" width="250">
                                  <template scope="scope">
                                    <span class="opt-btn-sp">
                                    <a  @click='modifyRoleDialog(scope)'><i class="fa fa-key"></i>角色授权</a>
                                    <a title="编辑" @click='modifyDialog(scope)'><i class="fa fa-edit"></i>编辑</a>
                                  
                                    </span>   
                                <!--icon删除图标-->
                                    <span class="delete" title="删除"><a @click="del(scope)"><i class="fa fa-remove"></i>删除</a></span>
                                  </template>
                              </el-table-column>

                        </el-table> 
              </div>
              
          </div>
   
        <el-dialog :visible.sync="modifyShow" :title="title" >
            <el-form :model="form">
              <el-form-item label="标识*" :label-width="formLabelWidth">
                <el-input v-model="editData.identify" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="名称" :label-width="formLabelWidth">
                <el-input v-model="editData.name" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="所属单位" :label-width="formLabelWidth">
                <el-input v-model="editData.unit" auto-complete="off"></el-input>
              </el-form-item>
           
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="modifyShow = false">取 消</el-button>
              <el-button type="primary" @click="confirmModify">保 存</el-button>
            </div>

        </el-dialog>

        <el-dialog :visible.sync="modifyRole" title="授权-系统管理员">
     
          <el-tree
            :data="treeData"
            show-checkbox
            node-key="id"
             highlight-current
            :props="defaultProps"
            :default-checked-keys="defaultChecked"
             default-expand-all	
     
             ref='roleTree'  
            >
          </el-tree>
          <div slot="footer" class="dialog-footer">
            <el-button @click="modifyRole = false">取 消</el-button>
            <el-button type="primary" @click="saveRoleModify">保 存</el-button>
          </div>
        </el-dialog>

      </div>
  </div>
</template>

<script>
import Vue from "vue";
import {
  ButtonGroup,
  Switch,
  Select,
  Input,
  Col,
  Row,
  Table,
  TableColumn,
  Tag,
  Pagination,
  Dialog,
  MessageBox,
  Message,
  Tree,
} from "element-ui";
Vue.use(ButtonGroup);
Vue.use(Select);
Vue.use(Input);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(Tag);
Vue.use(Pagination);
Vue.use(Dialog);
Vue.use(Tree);

export default {

  data () {
    return {
      editFormVisible: false,
      dialogTableVisible: false,
      input5: "",
      isShow: true,
      tableData: null,
      currentRow: null,
      modifyShow: false,
      title: "角色修改",
      modifyRole: false,
      defaultProps: {
        children: 'childList',
        label: 'name'
      },
      defaultChecked: [40, 41],
      treeData: null,
      RoleId: null,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      editData: {},
      guanlian: true

    };
  },
  mounted: function () {
    this.refresh();
    //绑定子页面需要的刷新模块方法
  },
  methods: {


    changeDialogVisible (text, i) {
      const dialogVisible = this.dialogVisible;
      switch (text) {
        case "角色授权":
          dialogVisible.role = true;
          break;
        case "总部部门授权":
          dialogVisible.headquarters = true;
          break;
        case "高管单位授权":
          dialogVisible.cxo = true;
          break;
        case "业务单位授权":
          dialogVisible.business = true;
          break;
        case "部门授权":
          dialogVisible.department = true;
          break;
        default:
          break;
      }
      Bus.$emit(text, dialogVisible);
      Bus.$emit('userId', this.tableData[i].userid);
    },
    toggle: function () {
      this.isShow = !this.isShow;
    },
    modifyDialog: function (scope) {
      this.modifyShow = true;
      this.editData = {};
      this.editData = JSON.parse(JSON.stringify(scope.row));
    },
    salaryDetail: function () {
      this.dialogTableVisible = true;
    },
    refresh: function () {
      var self = this;
      this.Axios.Post(this.URL.queryRole.url).then(function (res) {
        self.tableData = res.data.datas;
      });
    },
    create: function () {
      this.title = "创建角色";
      this.editData = {};
      this.modifyShow = true;
    },
    confirmModify: function () {
      var self = this;
      var params = {
        id: this.editData.id,
        unit: this.editData.unit,
        name: this.editData.name,
        identify: this.editData.identify,
      }

      this.Axios.Post(this.URL.modifyRole.url, { role: params }).then(function (res) {
        self.refresh();
      });

      this.modifyShow = false;

    },
    del: function (scope) {
      var self = this;
      var roleId = scope.row.id;
      var name = scope.row.name;
      MessageBox.alert('此操作将永久删除该权限,是否继续', '是否删除 ' + name, {
        confirmButtonText: '确定',
        cancelButtonText: "取消",
        callback: action => {
          if (action === "cancel") {
            return;
          }
          self.Axios.Post(self.URL.deleteRole.url + "?roleId=" + roleId).then(function () {
            self.refresh();
            Message({
              message: '删除成功',
              type: 'success'
            });
          })
        }
      })
    },
    modifyRoleDialog: function (scope) {
      var self = this;
      this.title = "角色修改";
      self.RoleId = scope.row.id;

      console.log(scope, 'scope')
      // 
      this.Axios.Post(this.URL.rolePermission.url + "?roleId=" + scope.row.id).then(function (res) {
        self.defaultChecked = res.data.datas.permissionIds;
        self.treeData = res.data.datas.allPermission;
        self.modifyRole = true;
        console.log(self.treeData)
      })

    },
    saveRoleModify () {
      if (this.$refs.roleTree) {
        var checked = this.$refs.roleTree.getCheckedKeys();

        var params = {
          roleId: this.RoleId,
          permissions: checked
        }

        this.Axios.Post(this.URL.saveRolePermission.url, params).then((res) => {
          Message({
            message: '更新成功',
            type: 'success'
          });
          this.modifyRole = false;
        })
      }

    }

  }
};
</script>

<style scoped lang='less'>
.roleManage .first-title h3 {
  font-size: 24px;
  margin-top: 20px;
  margin-bottom: 20px;
  font-weight: 500;
  line-height: 1.1;
}
.roleManage .second-sec {
  position: relative;
  border-radius: 3px;
  background: #ffffff;
  border-top: 3px solid #d2d6de;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  border-top-color: #00a65a;
}
.content-right {
  float: right;
  margin-top: 17px;
}

.roleManage .select-dept {
  font-size: 14px;
}
.roleManage .display-title {
  border-bottom: 1px solid #f4f4f4;
  padding: 10px;
}
.roleManage .switch-btn {
  padding: 10px 10px;
}
.roleManage .collapse-card {
  padding: 10px 10px;
  border-bottom: 1px solid #f4f4f4;
}

.roleManage .third-card {
  position: relative;
  border-radius: 3px;
  background: #ffffff;
  border-top: 3px solid #3c8dbc;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.roleManage .third-card .collapse-card .box-title {
  display: inline-block;
  font-size: 18px;
  color: #444;
  font-weight: 500;
  margin: 0;
  line-height: 1;
}
.roleManage .third-card .collapse-card .box-title .box-header > .box-tools {
  position: absolute;
  right: 10px;
  top: 5px;
}
.roleManage .third-card .collapse-card .collapse {
  border-radius: 3px;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 1px solid transparent;
  padding: 5px;
  font-size: 12px;
  background: transparent;
  color: #97a0b3;
}
/*content*/
.roleManage {
  .ibox-title {
    background-color: #ffffff;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 2px 0 0;
    color: inherit;
    margin-bottom: 0;
    color: #6c6a6c;
    padding: 15px 15px 7px;
    min-height: 48px;
  }
  .ibox-title h5 {
    display: inline-block;
    font-size: 14px;
    margin: 0 0 7px;
    padding: 0;
    text-overflow: ellipsis;
    float: left;
  }

  .ibox-tools {
    display: block;
    float: none;
    margin-top: 0;
    position: relative;
    padding: 0;
    text-align: right;
  }
  .ibox-tools a {
    cursor: pointer;
    margin-left: 5px;
    color: #c4c4c4;
  }
  /*ibox-centent*/
  .ibox-centent {
    padding: 20px 10px 40px;
    clear: both;
    background-color: #ffffff;
    color: inherit;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0;
  }
  .row {
    margin-right: -10px;
    margin-left: -10px;
  }
  .row .tt {
    padding: 0 30px;
  }

  .row .search {
    width: 100%;
    margin-bottom: 15px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .row .search .btn {
    width: 70px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    color: #fff;
    display: inline-block;
    background-color: #18a689;
    border-radius: 5px;
  }
  .row .search .btn:first-child {
    margin-left: 20px;
  }

  .row .search .btn:hover {
    background-color: #ccc;
    color: #000;
    cursor: pointer;
  }
  .row .search .wi {
    width: 33.3333333%;
  }

  .search-l {
    width: 33.3333333%;
    margin-bottom: 5px;
  }
  .el-button .r {
    width: 66.66666667%;
  }
  .el-input-group__append .el-button {
    background: #1ab394;
    color: #fff;
    border: 1px solid #1ab394;
  }
  /*table*/
  .el-table__header-wrapper thead div {
    background-color: #fff;
    color: #1f2d3d;
  }
  .btn-sp {
    padding-left: -10px;
  }
  .btn-sp > a {
    border: 1px solid #23c6c8;
    background: #23c6c8;
    color: #fff;
    border-radius: 3px;
    padding: 2px 9px;
    font-size: 12px;
    display: inline-block;
    margin-top: 5px;
  }
  .opt-btn-sp > a {
    border: 1px solid #18a689;
    background: #18a689;
    color: #fff;
    border-radius: 3px;
    padding: 2px 9px;
    font-size: 12px;
    display: inline-block;
    margin-top: 5px;
  }
  .delete > a {
    border: 1px solid #ec4758;
    background: #ec4758;
    color: #fff;
    border-radius: 3px;
    padding: 2px 9px;
    font-size: 12px;
    display: inline-block;
    margin: 10px 0;
    
  }
  .el-pagination {
    margin-top: 20px;
  }
  /*角色授权*/
  .modal-content {
    background-clip: padding-box;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    outline: 0 none;
    position: relative;
  }
  .modal-header .close {
    margin-top: -2px;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }
  .close {
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    color: black;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: 0.2;
  }
  .modal-title {
    margin: 0;
    line-height: 1.42857143;
  }
  .modal-header {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
    font-weight: 600;
    font-size: 14px;
  }
  .modal-body {
    padding: 20px 30px 30px 30px;
    position: relative;
  }
  .el-dialog__body {
    color: #48576a;
  }
  .list-unstyled {
    padding-left: 0;
    list-style: none;
  }
  ul,
  ol {
    margin-top: 0;
    margin-bottom: 10px;
  }
  input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 4px 0 0;
  }
  label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: bold;
  }
  .modal-footer {
    margin-top: 0;
    padding: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5;
  }
  .btn-primary {
    background-color: #1ab394;
    border-color: #1ab394;
    color: #ffffff;
    padding: 8px 13px;
    border-radius: 3px;
    border: 1px solid #1ab394;
    outline: none;
    cursor: pointer;
    font-size: 14px;
  }
  .modal-footer .btn + .btn {
    margin-bottom: 0;
    margin-left: 5px;
    color: inherit;
    background: white;
    border: 1px solid #e7eaec;
    padding: 8px 13px;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    font-size: 14px;
  }

  .glyphicon {
    position: relative;
    top: 3px;
    display: inline-block;
    font-family: "Glyphicons Halflings";
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  /*图标*/
  .glyphicon-off:before {
    content: "\e017";
  }
}

/*修改element-ui样式*/

.roleManage .el-radio-button__inner:hover {
  color: #333;
}
.roleManage .el-radio-group .el-radio-button__inner:hover {
  background-color: #e7e7e7;
}
.roleManage .el-radio-group .el-radio-button__inner {
  background-color: #f4f4f4;
}

.roleManage .el-radio-group .is-active .el-radio-button__inner:hover {
  background-color: #d4d4d4 !important;
}
/*i*/
.roleManage {
  .el-menu--collapse > .el-submenu > .el-submenu__title [class^="el-icon-"] {
    margin: 0;
    vertical-align: middle;
    width: 14px;
    text-align: center;
  }
  .el-input-group--append .el-input__inner,
  .el-input-group__prepend {
    border-width: 1px 0px 1px 1px;
  }
  .el-input-group__append .el-button[data-v-4fefba28] {
    border: 1px solid #1ab394;
    border-radius: 0px 3px 3px 0px;
    line-height: 0.99;
  }
  /*table*/


 


  .btn-primary:hover,
  .btn-primary:focus {
    background-color: #18a689 !important;
  }
  .btn-default:hover {
    background-color: #e6e6e6 !important;
    cursor: pointer;
    border: 1px solid #d2d2d2 !important;
  }
}

</style>
